<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/javascripts/vexflow_dev.js"></script>
    <script src="/javascripts/tool.js"></script>
    <script>

    </script>
</head>

<body>
    <h3>
        <%= title %>
    </h3>
    <div id="d">
        <progress id="pg" max="50" value=""></progress>
        <button type="button" onclick="start()">开始</button>
        <button type="button" onclick="end()">结束</button>
        <button type="button" onclick="test()">测试</button>
        <b id="result">按下键盘, 渲染五线谱.</b>
    </div>
    <div id="vex"></div>
    <script>
        var timer;
        var ws;
        var notes = [
            { keys: ['b/4'], duration: 'qr', stem_direction: -1, clef: 'treble' },
            { keys: ['b/4'], duration: 'qr', stem_direction: -1, clef: 'treble' }];
        vex_draw(notes, 'C')// 绘制初始的休止符占位
        if (window.WebSocket) {
            ws = new WebSocket('ws://localhost:8001');
            ws.onopen = (e) => console.log("连接服务器成功");
            ws.onclose = (e) => console.log("服务器关闭");
            ws.onerror = (e) => console.log("连接出错");

            // 当接收到后端的数据时
            ws.onmessage = function (e) {
                const div = document.getElementById('vex');
                const result = document.getElementById('result');
                while (div.hasChildNodes()) {
                    div.removeChild(div.lastChild);
                }
                console.log("message:", e.data);
                const [source, clef, keySignature, ...rest] = e.data.split('_');
                if (source === 'ans') {
                    notes[1] = { keys: rest, duration: '4', stem_direction: -1, clef: clef }
                    vex_draw(notes, keySignature);
                } else if (source === 'que') {
                    result.innerText = '???';
                    notes[0] = { keys: rest, duration: '4', stem_direction: -1, clef: clef }
                    notes[1] = { keys: ['b/4'], duration: 'qr', stem_direction: -1, clef: 'treble' }
                    if (timer) clearInterval(timer);
                    timer = createT(() => {
                        ws.send(getTvalue(timer)); // 如果时间到了就向后端发送时间
                    });
                    vex_draw(notes, keySignature);
                } else if (source === 'correct') {
                    result.innerText = '✅✅✅';
                    ws.send(getTvalue(timer)); // 向后端发送时间
                }
            }
        }
        function start() {
            ws.send('start'); // 提醒后端开始出题    
        }

        function test() {
            console.log(timer);
        }

        function end() {
            ws.send('end'); // 提醒后端开始出题 
            getTvalue(timer);
        }

    </script>
    <style>
        #boo {
            width: 100%;
            height: 500px;
        }

        #boo>svg {
            width: 100%;
            height: 300px;
        }
    </style>
</body>

</html>